<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('产值报表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<style>
    select {
        padding-top: 3px !important;
    }

    .select-list {
        margin-top: 5px !important;
    }

    .select-list li p {
        width: auto !important;
        margin-top: 7px !important;
    }

    .form-header {
        margin: 10px 0 0 0 !important;
    }

    .btn-group-sm {
        padding-top: 10px !important;
    }
</style>
<body class="gray-bg">

<div class="ui-layout-center">
    <div class="container-div">

        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="project-form">
                    <div class="col-sm-12">


                        <div class="select-list">
                            <ul>
                                <li>
                                    <p>工程公司：</p>
                                    <select id="compId" name="compId" class="form-control noselect2">
                                        <option value="">请选择</option>
                                        <option th:each="pro:${userComp}"
                                                th:value="${pro.compId}"
                                                th:text="${pro.compName}"></option>
                                    </select>


                                </li>
                                <li>
                                    <p>项目名称：</p>

                                    <select class="form-control noselect2" id="proName" name="proName">
                                        <option value="">请选择</option>
                                    </select>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="searchValue();"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="resetValue()"><i
                                            class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </form>
            </div>
            <from id="ordinary-form">
                <div class="col-sm-12 select-table table-striped">
                    <h4 class="form-header h4">计划产值(万元)</h4>
                    <div class="btn-group-sm">
                        <a class="btn btn-success" onclick="$.modal.open('新增年计划产值',addPlanUrl);"
                           shiro:hasPermission="outPutValue:add">
                            <i class="fa fa-plus"></i> 新增年计划产值
                        </a>
                    </div>

                    <table id="planValue"></table>
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <h4 class="form-header h4">实际产值(万元)</h4>
                    <div class="btn-group-sm">
                        <a class="btn btn-success" onclick="$.modal.open('新增年实际产值',addActualUrl);"
                           shiro:hasPermission="outPutValue:add">
                            <i class="fa fa-plus"></i> 新增年实际产值
                        </a>
                    </div>
                    <table id="actualValue"></table>
                </div>
            </from>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var prefix = ctx + "outPutValue";
    var id;
    var addPlanUrl = prefix + "/addPlanValue";
    var addActualUrl = prefix + "/addActualValue";
    var editPlanUrl = prefix + "/editPlanValue?id=";
    var editActualUrl = prefix + "/editActualValue?id=";
    var compId;
    var html;
    var value;
    var opt1;
    var opt2;


    var type;
    var id;
    var planUrl;
    var actualUrl;

    $(function () {

        type = [[${type}]];
        id = [[${id}]];
        if (type != null && id != null) {
            planUrl = ctx + "outPutValue/findPlanValueList?type=" + type + "&id=" + id;
            actualUrl = ctx + "outPutValue/findActualValueList?type=" + type + "&id=" + id;
        }else{
            planUrl = ctx + "outPutValue/findPlanValueList";
            actualUrl = ctx + "outPutValue/findActualValueList";
        }



        $("#compId").change(function () {
            compId = $("#compId option:selected").val();
            $.ajax({
                url: prefix + '/findProByCompId',
                data: {
                    "compId": compId
                },
                success: function (data) {
                    $("#proName").find("option").remove();
                    $("#proName").append('<option value="">请选择</option>');
                    // if ($("#compId option:selected").val() == "") {
                    //     $("#proName").append('<option value="">请选择</option>')
                    // }
                    for (var i in data.data) {
                        html = data.data[i].pro_name;
                        value = data.data[i].comp_id;
                        $("#proName").append('<option value="' + html + '">' + html + '</option>')
                    }
                }
            })
        });

        var options1 = {
            url: planUrl,
            id: "planValue",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            modalName: "项目计划产值",
            columns: [ {
                field: 'compName',
                title: '工程公司'
            }, {
                field: 'proName',
                title: '项目名称'
            }, {
                field: 'year',
                title: '年份'
            }, {
                field: 'january',
                title: '一月'
            }, {
                field: 'february',
                title: '二月'
            }, {
                field: 'march',
                title: '三月'
            }, {
                field: 'april',
                title: '四月'
            }, {
                field: 'may',
                title: '五月'
            }, {
                field: 'june',
                title: '六月'
            }, {
                field: 'july',
                title: '七月'
            }, {
                field: 'august',
                title: '八月'
            }, {
                field: 'september',
                title: '九月'
            }, {
                field: 'october',
                title: '十月'
            }, {
                field: 'november',
                title: '十一月'
            }, {
                field: 'december',
                title: '十二月'
            }, {
                field: 'total',
                title: '合计(万元)'
            },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        id = row.id;
                        var actions = [];
                        // actions.push('<a class="btn btn-success btn-xs" onclick="$.modal.open(\'' + id + '\')" href="#"><i class="fa fa-edit" ></i>填写月计划产值</a> ');
                        actions.push('<a class="btn btn-success btn-xs" onclick="$.modal.open(\'填写月计划产值\',\'' + editPlanUrl + id + '\')" href="#"><i class="fa fa-edit" ></i>填写月计划产值</a> ');
                        return actions.join('');
                    }
                },]
        };
        $.table.init(options1);


        var options2 = {
            url: actualUrl,
            id: "actualValue",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            modalName: "项目实际产值",
            columns: [ {
                field: 'compName',
                title: '工程公司'
            }, {
                field: 'proName',
                title: '项目名称'
            }, {
                field: 'year',
                title: '年份'
            }, {
                field: 'january',
                title: '一月'
            }, {
                field: 'february',
                title: '二月'
            }, {
                field: 'march',
                title: '三月'
            }, {
                field: 'april',
                title: '四月'
            }, {
                field: 'may',
                title: '五月'
            }, {
                field: 'june',
                title: '六月'
            }, {
                field: 'july',
                title: '七月'
            }, {
                field: 'august',
                title: '八月'
            }, {
                field: 'september',
                title: '九月'
            }, {
                field: 'october',
                title: '十月'
            }, {
                field: 'november',
                title: '十一月'
            }, {
                field: 'december',
                title: '十二月'
            }, {
                field: 'total',
                title: '合计(万元)'
            },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        id = row.id;
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" onclick="$.modal.open(\'填写月实际产值\',\'' + editActualUrl + id + '\')" href="#"><i class="fa fa-edit" ></i>填写月实际产值</a> ');
                        return actions.join('');
                    }
                },]
        };
        $.table.init(options2);
        opt1 = options1;
        opt2 = options2;

    });

    function searchValue() {
        $("#planValue").bootstrapTable('refresh');
        $("#actualValue").bootstrapTable('refresh');
    }

    function resetValue() {
        $.form.reset();
        $("#planValue").bootstrapTable('refresh');
        $("#actualValue").bootstrapTable('refresh');


    }

</script>
</body>

</html>